<template>
  <div>
    <div>
      <input type="text" v-model="val" />
      <button @click="add">todo</button>
    </div>
    <div id="con">
      <div id="left">
        <h2>
          未进行
          <!-- <span>{{arr.length}}</span> -->
        </h2>
        <ul>
          <li v-for="(item,index) in arr" :key="index" v-show="item.done==false">
            <input type="checkbox" :checked="item.done" @click="change($event,item)" />
            {{item.title}}
            <span @click="del(index)">x</span>
          </li>
        </ul>
        <h2>以进行</h2>
        <ul>
          <li v-for="(item,index) in arr" :key="index" v-show="checked=item.done==true">
            <input type="checkbox" :checked="item.done" @click="change($event,item)" />
            {{item.title}}
            <span @click="del(index)">x</span>
          </li>
        </ul>
      </div>
      <div id="right">
        <h2>全部</h2>
        <ul>
          <li v-for="(item,index) in arr" :key="index">
            <input type="checkbox" :checked="item.done" @click="change($event,item)" />
            {{item.title}}
            <span @click="del(index)">x</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: "",
      arr: [],
    };
  },
  methods: {
    add() {
      this.arr.push({ title: this.val, done: false });
    },
    change(e, item) {
      item.done = e.target.checked;
    },
    del(i) {
      this.arr.splice(i, 1);
    },
  },
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
#con {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  #left {
    flex: 1;
  }
  #right {
    flex: 1;
  }
}
</style>